<template>
  <div>
    <el-col :span="14">
      <el-menu
        default-active="4"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="coolre"
        :collapse-transition="false"
        :router="true"
      >
        <el-menu-item index="/dashboard">
          <i class="iconfont icon-shouye"></i>
          <span slot="title">后台首页</span>
        </el-menu-item>

        <el-menu-item index="/orders">
          <i class="iconfont icon-icon-"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>

        <el-submenu index="/goods">
          <template slot="title">
            <i class="iconfont icon-shangpin"></i>
            <span>商品管理</span>
          </template>
          <el-menu-item index="/goods/list">商品列表</el-menu-item>
          <el-menu-item index="/goods/add">商品添加</el-menu-item>
          <el-menu-item index="/goods/cate">商品分类</el-menu-item>
        </el-submenu>

        <!-- 店铺管理 -->
        <el-menu-item index="/store">
          <i class="iconfont icon-dianpu"></i>
          <span slot="title">店铺管理</span>
        </el-menu-item>

        <!-- 账号管理 -->
        <el-submenu index="/account">
          <template slot="title">
            <i class="iconfont icon-zhanghao"></i>
            <span>账号管理</span>
          </template>
          <el-menu-item index="/account/list">账号列表</el-menu-item>
          <el-menu-item index="/account/add">添加账号</el-menu-item>
          <el-menu-item index="/account/reset">修改密码</el-menu-item>
        </el-submenu>

        <!-- 销售统计 -->
        <el-submenu index="/count">
          <template slot="title">
            <i class="iconfont icon-tongji"></i>
            <span>销售统计</span>
          </template>
          <el-menu-item index="/count/goods">商品统计</el-menu-item>
          <el-menu-item index="/count/orders">订单统计</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  methods: {},
  props: {
    coolre: {
      typeof: Boolean,
      default: true
    }
  }
}
</script>

<style lang="less" scoped>
.el-col {
  width: 100%;
  height: 100%;
}
.el-menu {
  border: none;
}
i {
  margin-right: 10px;
  color: white;
}
</style>
